<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom api</title>
</head>
<body>
    <!-- <div class="box">abc</div>
    <div id="id">def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3> -->
    <!-- <img src="头像.png" alt="这是好看的男人" title="好看"> -->

    <!-- <input type="text">
    <button>隐藏密码</button> -->
    <!-- <div id = "one" style="font-size: 20px; height: 500px;">这是一个div,点击放大</div>
    <style>
        .light{
            /* 日间模式 */
            color: rgba(75, 70, 70, 0.719);
            background-color:antiquewhite;
        }
        .dark{
            /*夜间模式*/
            color:beige;
            background-color: rgba(75, 74, 74, 0.849);

        }
    </style> -->

    <ul>
        <li>11</li>
        <li>22</li>
    </ul>
 
    
    <script>
        let ul = document.querySelector('ul');
        for(let n = 3;n<10;n++){
            let li = document.createElement('li');
            li.innerHTML = n + '' +n;
            ul.appendChild(li);
        }
        //删除 33 这个元素
        let toDelete = document.querySelectorAll('li')[2];
        console.log(toDelete);
        ul.removeChild(toDelete);

        // let div = document.querySelector('#one');
        // div.onclick = function(){
        //     //点击切换页面模式和日间模式
        //     if(div.className == 'dark'){
        //         div.className = 'light';
        //     }else{
        //         div.className = 'dark'
        //     }
        // }

        // let div = document.querySelector('div');
        // div.onclick = function(){
        //     //先获取到当前字体的大小
        //     let fontSize = parseInt(div.style.fontSize);
        //     fontSize += 10;
        //     div.style.fontSize = fontSize + 'px';
        // }
        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     if(input.type == 'text'){
        //         input.type = 'password';
        //         button.innerHTML = '显示密码';
        //     }else{
        //         input.type = 'text';
        //         button.innerHTML = '隐藏密码';
        //     }
        // }

        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     console.log(input.value);
        // }

        // let img = document.querySelector('img');
        // console.dir(img);
        // img.onclick = function(){
        //     console.log(img.src);
        //     console.log(img.title);
        //     console.log(img.alt);
        //     img.title = "宇宙最帅！";
        // }

        // let div = document.querySelector('.box');
        // div.onclick = function(){
        //     console.log(div.innerText);
        //     div.innerText += 'a';
        // }
        // let elem1 = document.querySelector('.box');
        // console.dir(elem1);
        // let elem2 = document.querySelector('#id');
        // console.log(elem2);
        // let elem3 = document.querySelector('h3>span>input');
        // console.log(elem3);
    </script>
</body>
</html>